import { readFileSync } from 'fs-extra';
import { join } from 'path';
import Vue from 'vue/dist/vue';
import { PropType } from "./action";
import { ActionHead } from './actionHead';

export const ActionProp = Vue.component("action-prop", {
    props: ["actionProp", "actionType", "open"],
    components: { ActionHead },
    template: readFileSync(join(__dirname, '../../../static/template/vue/actionProp.html'), 'utf-8'),
    data() {
        return {
            valueTypeKeyOnly: Object.keys(PropType).filter((v) => isNaN(parseInt(v))),
            valueTo: null,
            valueFrom: null,

            propType: -1,
            showTo: false,
            showFrom: false,
        }
    },
    mounted() {
        this.onActionPropChange();
    },
    watch: {
        actionProp: function () {
            this.onActionPropChange();
        },
    },
    methods: {
        onActionPropChange() {
            this.propType = this.actionProp.type.value;
            this.showTo = this.propType === PropType.free || this.propType === PropType.to;
            this.showFrom = this.propType === PropType.free || this.propType === PropType.from;
            
            this.valueTo = this.actionProp.valueTo;
            this.valueFrom = this.actionProp.valueFrom;
    
            (this.$refs.valueToDump as any).render(this.valueTo);
            (this.$refs.valueFromDump as any).render(this.valueFrom);
        },
        onPropTypeChange: function (value: number) {
            this.$emit("onPropTypeChange", value);
        },
        onValueTypeChange: function (value: number) {
            this.$emit("onValueTypeChange", value);
        },
        onOpenChange: function (open: boolean) {
            this.$emit("onOpenChange", open);
        },
    },
})